<template>
    <div style="padding:10px;">
        <el-table :data="tableData" style="width:calc(100vw - 265px)">
            <el-table-column prop="username" label="用户名"/>
            <el-table-column prop="age" label="年龄"/>
            <el-table-column prop="sex" label="性别" />
            <el-table-column prop="address" label="地址" />
            <el-table-column prop="phone" label="电话" />
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="handleClick(scope.row)">编辑</el-button>
                    <el-button link type="danger" size="small" @click="delClick(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            v-model="dialogVisible"
            title="编辑"
            append-to-body
            v-if="dialogVisible"
            :close-on-click-modal="false"
            width="20%"
        >
            <div class="userEdit">
                <div class="userItem">
                    <el-input disabled v-model="userObj.username" placeholder="Please input" />
                </div>
                <div class="userItem">
                    <el-input v-model="userObj.age" placeholder="Please input" />
                </div>
                <div class="userItem">
                    <el-input v-model="userObj.sex" placeholder="Please input" />
                </div>
                <div class="userItem">
                    <el-input v-model="userObj.address" placeholder="Please input" />
                </div>
                <div class="userItem">
                    <el-input v-model="userObj.phone" placeholder="Please input" />
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confromClick">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref,reactive,onMounted } from 'vue'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import axios from 'axios'

const router=useRouter();
const tableData = ref([])
const dialogVisible=ref(false)
const userId=ref(0)
const userObj=reactive({
    username:"",
    age:"",
    sex:"",
    address:"",
    phone:""
})
onMounted(() => {
    getUserInfo();
})
const handleClick=(row)=>{
    userObj.username=row.username;
    userObj.age=row.age;
    userObj.sex=row.sex;
    userObj.address=row.address;
    userObj.phone=row.phone;
    userId.value=row.id;
    dialogVisible.value=true;
}
const confromClick=()=>{
    let obj={
        username:userObj.username,
        age:userObj.age,
        sex:userObj.sex,
        address:userObj.address,
        phone:userObj.phone,
        id:userId.value
    }
    axios({
        method:"post",
        url:'http://localhost:5000/updTest',
        data:obj,
        headers:{
            'token':sessionStorage.getItem('token'),
            'Content-Type':'application/json;charset=UTF-8'
        }
    }).then(res=>{
        if(res.data.code==200){
            ElMessage({
                type: 'success',
                message: '保存成功！',
            });
            dialogVisible.value=false;
            getUserInfo();
        }
    })
}
const delClick=(row)=>{
    axios({
        method:"post",
        url:'http://localhost:5000/delUser',
        data:{id:row.id},
        headers:{
            'token':sessionStorage.getItem('token'),
            'Content-Type':'application/json;charset=UTF-8'
        }
    }).then(res=>{
        if(res.data.code==200){
            ElMessage({
                type: 'success',
                message: '删除成功！',
            });
            getUserInfo();
        }
    })
}
const getUserInfo=()=>{
    axios({
        method:"get",
        url:'http://localhost:5000/selectAll',
        headers:{
            'token':sessionStorage.getItem('token'),
            'Content-Type':'application/json;charset=UTF-8'
        }
    }).then(res=>{
        if(res.data.code==200){
           tableData.value=res.data.data;
        }else{
            ElMessage({
                message: res.data.msg,
                type: 'error',
            })
        }
    }).catch(err=>{
        ElMessage({
            message:"登录已失效",
            type: 'error',
        })
        sessionStorage.removeItem("username");
        sessionStorage.removeItem("token")
        router.push("/login")
    })
}
</script>
<style lang="scss" scoped>
    .userEdit{
        .userItem{
            margin-top:10px;
        }
    }
</style>